<div
  role="columnheader"
  ng-class="{ 'sortable': sortable }"
  ui-grid-one-bind-aria-labelledby-grid="col.uid + '-header-text ' + col.uid + '-sortdir-text'"
  aria-sort="{{
    col.sort.direction == asc
      ? 'ascending'
      : col.sort.direction == desc
      ? 'descending'
      : !col.sort.direction
      ? 'none'
      : 'other'
  }}"
>
  <div
    role="button"
    tabindex="0"
    class="ui-grid-cell-contents ui-grid-header-cell-primary-focus"
    col-index="renderIndex"
    title="TOOLTIP"
  >
    <span ui-grid-one-bind-id-grid="col.uid + '-header-text'">{{ col.displayName CUSTOM_FILTERS }}</span>
    <span
      ui-grid-one-bind-id-grid="col.uid + '-sortdir-text'"
      ui-grid-visible="col.sort.direction"
      aria-label="{{ getSortDirectionAriaLabel() }}"
      ><i
        ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }"
        title="{{ col.sort.priority ? i18n.headerCell.priority + ' ' + col.sort.priority : null }}"
        aria-hidden="true"
        >&nbsp;</i
      ></span
    >
  </div>
  <div
    role="button"
    tabindex="0"
    ui-grid-one-bind-id-grid="col.uid + '-menu-button'"
    class="ui-grid-column-menu-button"
    ng-if="grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false"
    ng-click="toggleMenu($event)"
    ng-class="{'ui-grid-column-menu-button-last-col': isLastCol}"
    ui-grid-one-bind-aria-label="i18n.headerCell.aria.columnMenuButtonLabel"
    aria-haspopup="true"
  >
    <i class="ui-grid-icon-angle-down" aria-hidden="true">&nbsp;</i>
  </div>
  <div ui-grid-filter></div>
</div>
